<template>
    <div class="state-box font-12" :class="ggclass" :style="{ 'background-color': stateBack[gg_status], color: stateColor[gg_status] }">
        <div class="dot" :style="{ 'background-color': stateColor[gg_status] }"></div>
        <slot>
            {{ stateList[gg_status] }}
        </slot>
    </div>
</template>

<script>
export default {
    name: "qg-dot-state",
    props: {
        state: {
            type: [Number, String],
            default: "0",
        },
        ggclass: {
            type: String,
            default: "",
        },
        stateList: {
            type: Array,
            default: () => ["已完成", "待开始", "进行中", "已延时"],
        },
        stateBack: {
            type: Array,
            default: () => ["#dcfbd1", "#f5f5f5", "#e7eefc", "#fbe1e3"],
        },
        stateColor: {
            type: Array,
            default: () => ["#3db728", "#999999", "#3e79f7", "#f5434d"],
        },
    },
    computed: {
        gg_status() {
            return Number(this.state);
        },
    },
};
</script>

<style lang="less" scoped>
.state-box {
    padding: 0 8rem;
    height: 20rem;
    border-radius: 3rem;
    display: inline-flex;
    align-items: center;
    .dot {
        width: 8rem;
        height: 8rem;
        border-radius: 8rem;
        margin-right: 6rem;
    }
}
</style>
